import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import { theme_app, theme_text } from '../../utils/appTheme'
import { getTodayLineTask } from '../../netServer/arrangeDrug'
import { Empty } from '../../components/Empty/Empty'


class ArrangeDrugList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      taskList: [],
      isFresh: false
    }
  }
  static navigationOptions = ({ navigation }) => ({
    header: <HeaderDefault backBtnOnPress={navigation.goBack} title="排药" />
  })

  componentDidMount() {
    this._loadTodayLineTask()
  }

  _loadTodayLineTask = () => {
    let { user_id } = this.props.user_info
    let params = new FormData()
    params.append('userId', user_id)

    // console.log(params);

    getTodayLineTask(params, resp => {
      // console.log(resp);

      let { code, data = [], msg } = resp

      if (code == 0) {
        this.setState({
          taskList: data,
          isFresh: false
        })
      } else {
        this.setState({
          taskList: [],
          isFresh: false
        })
      }
    })
  }

  _refreshData = () => {
    this.setState({
      isFresh: true
    })
    this._loadTodayLineTask()
  }

  _renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={{
          width: screenWidth,
          height: 80,
          flexDirection: 'row',
          borderBottomColor: '#efefef',
          borderBottomWidth: 1,
          backgroundColor: 'white',
          paddingLeft: 10,
          paddingRight: 10
        }}
        onPress={() => {
          this.props.navigation.navigate('ArrangeDrug', {
            taskMain: item,
            callBack: this._loadTodayLineTask
          })
        }}
      >
        <View style={{ width: screenWidth - 120, height: 80 }}>
          <View style={styles.lineStyle}>
            <Text style={{ fontSize: 16 }}>{item.name}</Text>

            <Text style={{ marginLeft: 25 }}>
              {item.sex == 1 ? '男' : '女'}/{this._getAge(item.birthday)}
            </Text>

            <Text style={{ marginLeft: 25 }}>{item.bed_no}</Text>
          </View>

          <View style={styles.lineStyle}>
            <Text style={{ width: 150 }}>诊断：{item.diagnose}</Text>

            <Text style={{ marginLeft: 25, color: 'red' }}>{item.allergy}</Text>
          </View>
        </View>

        <View style={{ width: 100, height: 80, flexDirection: 'row' }}>
          <View
            style={{
              width: 40,
              height: 80,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {item.name === '王小翠' ? (
              <Image
                source={require('./src/shenhe.png')}
                style={{ width: 40, height: 40 }}
              />
            ) : null}
          </View>
          <View
            style={{
              width: 60,
              height: 80,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text style={{ fontSize: 20 }}>
              {item.hasAdvNum}/{item.totalAdvNum}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  _getAge(ageStr) {
    if (!ageStr) {
      return ''
    }

    var birthday = new Date(ageStr.replace(/-/g, '/'))
    var d = new Date()
    var age =
      d.getFullYear() -
      birthday.getFullYear() -
      (d.getMonth() < birthday.getMonth() ||
        (d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate())
        ? 1
        : 0)
    return age
  }

  _keyExtractor = (item, index) => index + 'main'

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: '#efefef' }} />
  }

  _ListEmptyComponent = () => {
    return <Empty titleStr="暂时没有相关的数据" />
  }

  render() {
    return (
      <View style={styles.container}>
        {/* <View style={{ flex: 1 }} /> */}
        <FlatList
          refreshing={this.state.isFresh}
          onRefresh={this._refreshData}
          style={{ flex: 1 }}
          ListEmptyComponent={this._ListEmptyComponent}
          ItemSeparatorComponent={this._separator}
          data={this.state.taskList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: 'row',
    alignItems: 'center'
  }
})

function select(store) {
  return {
    user_info: store.userInfo.user_info
  }
}

export default connect(select)(ArrangeDrugList)
